//加载公共样式
require('../../assets/css/public.less')

//加载自己的样式
require('./course.less')
// 引入aioxs
const request = require('../../lib/request/request')
// 服务器地址
const API = 'http://fitness.h5.itsource.cn:3701'
//引入tabbar渲染函数
const renderTabbar = require('../../lib/tabbar/tabbar')
//导入navbar
const renderNavbar = require('../../lib/navbar/navbar')
const { render } = require('less')
window.onload = () => {
    //渲染tabbar
    renderTabbar('course')
    renderNavbar('course')

    function $(sel) {
        return document.querySelector(sel)
    }

    function $a(sel) {
        return document.querySelectorAll(sel)
    }
    // 获取数据
    function getData() {

        request.get('/api/train/courseList').then(res => {
            // 解构
            let { errno, data } = res.data
            // console.log(res.data);
            // 判断
            if (errno === 0) {
                console.log('data :>> ', data);
                /*  data.map(v => {
                     // data[0].name
                     tit.textContent = data[0].name
                     content.textContent = data[0].desc
                     img.src = API + data[0].imgurl */
                // })
                /* let arr = data.filter((v, i) => {
                    return i !== 0
    
                })
                // console.log(arr);
                imgs.src=API+arr */
                // 渲染
                render(data)
            }
        })
    }
    getData()

    // 渲染
    function render(data) {
        // console.log(data[0]);
        let html = `
        <p class="newclass">最新课程</p>
            <a href="./courseDetail.html?id=${data[0].courseId}" class="bigout">
                <img class="img" id="img" src="${API + data[0].imgurl}">
                <p id="tit">${data[0].name}</p>
                <p id="content">${data[0].desc}</p>
            </a>
        `
        newCourse.innerHTML = html




        // 遍历数组得到数据
        const arr1 = data.filter((v, i) => i !== 0)
        // console.log(arr1);
        // 列表
        const html1 = `
        ${arr1.map(v => `
        <a href="./courseDetail.html?id=${v.courseId}" class="courseList">
            <img id="imgs" src="${API + v.imgurl}">
            <p class="title">${v.name}</p>
            <p class="words">${v.desc}</p>
        </a>
        `
        ).join('')}
        `
        // 渲染
        course1.innerHTML = html1
    }

    // id

}
